<form novalidate ng-submit="$ctrl.close({ $value: $ctrl.parameter })">
  <div class="modal-header">
    <button type="button" class="close" aria-label="Close" ng-click="$ctrl.dismiss()">
      <span aria-hidden="true">&times;</span>
    </button>
    <h4 class="modal-title">{{ $ctrl.isNewParameter ? 'Add Parameter' : $ctrl.parameter.name }}</h4>
  </div>
  <div class="modal-body">
    <div class="form">
      <div class="form-group" ng-if="$ctrl.isNewParameter" ng-class="{'has-error': $ctrl.parameterAlreadyExists($ctrl.parameter.name)}">
        <label>Keyword</label>
        <input type="text" class="form-control" ng-model="$ctrl.parameter.name" autofocus ng-change="$ctrl.updateTitle()">
        <div class="help-block" ng-if="!$ctrl.parameterAlreadyExists($ctrl.parameter.name)">
          This is what will be added to your query editor<span ng-if="$ctrl.parameter.name != ''">: \{\{&nbsp;{{ $ctrl.parameter.name }}&nbsp;\}\}</span>
        </div>
        <div class="help-block" ng-if="$ctrl.parameterAlreadyExists($ctrl.parameter.name)">
          Parameter with this name already exists.
        </div>
      </div>
      <div class="form-group">
        <label>Title</label>
        <input type="text" class="form-control" ng-model="$ctrl.parameter.title" ng-change="$ctrl.shouldGenerateTitle = false">
      </div>
      <div class="form-group">
        <label>Type</label>
        <select ng-model="$ctrl.parameter.type" class="form-control">
          <option value="text">Text</option>
          <option value="number">Number</option>
          <option value="enum">Dropdown List</option>
          <option value="query">Query Based Dropdown List</option>
          <option disabled>--------------------------------------------------</option>
          <option value="date">Date</option>
          <option value="datetime-local">Date and Time</option>
          <option value="datetime-with-seconds">Date and Time (with seconds)</option>
          <option disabled>--------------------------------------------------</option>
          <option value="date-range">Date Range</option>
          <option value="datetime-range">Date and Time Range</option>
          <option value="datetime-range-with-seconds">Date and Time Range (with seconds)</option>
        </select>
      </div>
      <div class="form-group">
        <label>
          <input type="checkbox" class="form-inline" ng-model="$ctrl.parameter.global"> Global
        </label>
      </div>
      <div class="form-group" ng-if="['date', 'datetime-local', 'datetime-with-seconds'].indexOf($ctrl.parameter.type) >= 0">
        <label>
          <input type="checkbox" class="form-inline" ng-model="$ctrl.parameter.useCurrentDateTime"> Use Today/Now as default value if no other value is set
        </label>
      </div>
      <div class="form-group" ng-if="$ctrl.parameter.type === 'enum'">
        <label>Dropdown List Values (newline delimited)</label>
        <textarea class="form-control" rows="3" ng-model="$ctrl.parameter.enumOptions"></textarea>
      </div>
      <div class="form-group" ng-if="$ctrl.parameter.type === 'query'">
        <label>Query to load dropdown values from:</label>
        <ui-select ng-model="$ctrl.parameter.queryId" reset-search-input="false">
          <ui-select-match placeholder="Search a query by name">{{$select.selected.name}}</ui-select-match>
          <ui-select-choices repeat="q.id as q in $ctrl.queries" refresh="$ctrl.searchQueries($select.search)" refresh-delay="0">
            <div class="form-group" ng-bind-html="$ctrl.trustAsHtml(q.name | highlight: $select.search)"></div>
          </ui-select-choices>
        </ui-select>
      </div>
    </div>
  </div>
  <div class="modal-footer p-t-0" ng-if="$ctrl.isNewParameter">
    <button type="button" class="btn btn-default pull-left" ng-click="$ctrl.dismiss()">Close</button>
    <button type="submit" class="btn btn-primary pull-right" ng-disabled="($ctrl.parameter.name == '') || $ctrl.parameterAlreadyExists($ctrl.parameter.name)">+ Add Parameter</button>
  </div>
</form>
